/*
  学习目标：使用useEffect发请求，获取数据
  前置：1. 准备request.js  2. 下载axios

*/
import React from 'react';
import { useEffect } from 'react';
import request from './utils/request';
import { useState } from 'react';

export default function App() {
  // 1. 声明数据
  const [list, setList] = useState([]);

  // 2. 封装异步action
  async function loadData(params) {
    const res = await request({ url: '/v1_0/channels' });

    setList(res.data.channels);
  }

  // 3.挂载事件
  // 💥 useEffect（同步的函数， []）
  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      {/* 4. 列表渲染 */}
      {list.map((item) => {
        return <h1 key={item.id}>{item.name}</h1>;
      })}
    </div>
  );
}
